<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- cornerstone css - provides some useful css classes -->
    <link href="../../dist/cornerstone.css" rel="stylesheet">

</head>
<body>
<div class="container">

    <h1>
        imageloader/index.html
    </h1>
    This example shows a very simple ImageLoader which generates the image on the fly.  A real image loader
    would of course get the data form a server.  Note - the other live examples use a custom ImageLoader
    which have the pixel data for images stored in them as base64 encoded strings.
    <br>
    <br>

    <div id="dicomImage" style="width:512px;height:512px;"
         class="cornerstone-enabled-image"
         oncontextmenu="return false"
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
    </div>



</div>
</body>

<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>


<script>
    $(document).ready(function() {

        // Loads an image given an imageId
        function loadImage(imageId) {
            var width = 256;
            var height = 256;

            var numPixels = width * height;
            var pixelData = new Uint16Array(numPixels);
            var index = 0;
            var rnd = Math.round(Math.random() * 255);
            for (var y = 0; y < height; y++) {
                for (var x = 0; x < width; x++) {
                    pixelData[index] = (x + rnd) % 256;
                    index++;
                }
            }

            function getPixelData()
            {
                return pixelData;
            }

            var image = {
                imageId: imageId,
                minPixelValue: 0,
                maxPixelValue: 255,
                slope: 1.0,
                intercept: 0,
                windowCenter: 127,
                windowWidth: 256,
                render: cornerstone.renderGrayscaleImage,
                getPixelData: getPixelData,
                rows: height,
                columns: width,
                height: height,
                width: width,
                color: false,
                columnPixelSpacing: 1.0,
                rowPixelSpacing: 1.0,
                invert: false,
                sizeInBytes: width * height * 2
            };

            // Create a deferred object, resolve it with the image object we just created and return the
            // deferred to cornerstone.  Cornerstone will get the image object by calling then() on the
            // deferred
            var deferred = $.Deferred();
            deferred.resolve(image);
            return deferred;
        }

        cornerstone.registerImageLoader('myImageLoader', loadImage);

        // image enable the element
        var element = document.getElementById('dicomImage');
        cornerstone.enable(element);

        // load the image and display it
        var imageId = 'myImageLoader://1';
        cornerstone.loadImage(imageId).done(function(image) {
            cornerstone.displayImage(element, image);
        });

    });

</script>
</html>
